<template>
	<view class="page flex_c">

		<view class="gradient-text">幸运翻倍</view>

		<view class="subtitle flex_r_around">
			<text>严禁违规礼物买卖，一经发现将依规处罚</text>
		</view>

		<view class="machine">
			<view class="machine-banner block flex_r_between" v-if="!is_playing">
				<view class="item flex_c" v-for="(item,index) in mySlotMachine.prizes" :key="index"
					@click="onChooseGift(item)" :id="select.id== item.fonts[0].id ? 'select' : ''">
					<image :src="item.imgs[1].src" mode="aspectFill" class="gift-image"></image>
					<text class="text2">{{ item.fonts[0].text }}</text>
					<image :src="item.imgs[0].src" mode="aspectFill" class="bg"></image>
				</view>
			</view>
			<view class="block" v-if="is_playing">
				<SlotMachine ref="mySlotMachine" width="750rpx" height="346rpx" :blocks="mySlotMachine.blocks"
					:slots="mySlotMachine.slots" :prizes="mySlotMachine.prizes"
					:defaultStyle="mySlotMachine.defaultStyle" :defaultConfig="mySlotMachine.defaultConfig"
					@click="startSlotMachine" @end="endSlotMachine" />
			</view>
		</view>

		<view class="banner-count flex_c" v-if="banner_status == 2">
			<view class="banner-count-title">本期中奖</view>

			<image :src="getGiftImg()" mode="aspectFill"></image>

			<text>距离下次开始还有 <i>{{ time }}s</i></text>
		</view>

		<view class="banner flex_center" v-if="banner_status == 0">

			<view class="item flex_c" v-if="select.id && now_prize_status == 1">
				<view class="top flex_center">
					<image :src="select.img" mode="aspectFill"></image>
					<text>X{{ config_num }}</text>
				</view>
				<view class="bottom">
					本期选择
				</view>
			</view>

			<view class="item flex_r_around" v-else>
				<view class="bottom">
					未参与
				</view>
			</view>

			<view class="center flex_c">
				<u-count-down ref="countDown" :time="now_left_time * 1000" format="HH:mm:ss"
					@finish="timeFinish"></u-count-down>
				<text>开奖倒计时</text>
			</view>

			<view class="item flex_c">
				<view class="top flex_center">
					<image :src="old_prize_image" mode="aspectFill" v-show="old_prize_res != 0"></image>
				</view>
				<view class="bottom">
					上期中奖
				</view>
			</view>

		</view>

		<view class="banner-pendding flex_center" v-if="banner_status == 1">
			<view class="item flex_c" v-if="select.id && now_prize_status == 1">
				<view class="top flex_center">
					<image :src="select.img" mode="aspectFill"></image>
					<text>X{{ config_num }}</text>
				</view>
				<view class="bottom">
					本期选择
				</view>
			</view>

			<view class="item flex_r_around" v-else>
				<view class="bottom">
					未参与
				</view>
			</view>
			
			<view class="center flex_c">
				<span>正在开奖中</span>
				<text>开奖倒计时 {{ time }}s</text>
			</view>

			<view class="item flex_c">
				<view class="top flex_center">
					<image :src="old_prize_image" mode="aspectFill"></image>
				</view>
				<view class="bottom">
					上期中奖
				</view>
			</view>
		</view>

		<view class="content">
			<view class="grid">
				<u-grid :border="false" :col="4">
					<u-grid-item v-for="(item,index) in config" :key="index">
						<view class="grid-item flex_r_around" :id="config_num == item ? 'select' : ''"
							@click="onChooseConfig(item)">
							<text>×{{ item }}</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="btn">
				<button class="right flex_r_around" @click="setPrize" :disabled="is_playing">
					<text>确定</text>
				</button>
			</view>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="success_modal" @close="success_modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="success flex_c">
					<view class="title">本轮中奖为{{ getGiftName() }}</view>
					<view class="text">{{
						old_prize_status == 0 ? '很遗憾您未获得奖励，再接再厉'
						: old_prize_status == 1 ? `恭喜您获得了价值${old_prize_gold}金币的礼物已放置礼物背包`
						: '很遗憾您未获得奖励，再接再厉'
					}}</view>
					<button @click="success_modal = false">确定</button>
				</view>

			</u-popup>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="list_modal" @close="list_modal = false" mode="center" bgColor="transparent"
				:safeAreaInsetBottom="false">

				<view class="list flex_c">
					<view class="title">开奖记录</view>
					<view class="text">中奖总金额：{{ total_prize_num || 0 }}</view>
					<view class="table flex_c">
						<view class="item flex_center header">
							<view>开奖期</view>
							<view>开奖礼物</view>
							<view>是否中奖</view>
							<view>投注倍数</view>
							<view>中奖金额</view>
						</view>
						<view class="flex_1">
							<scroll-view scroll-y="true" @scrolltolower="onReach">
								<view class="item flex_center" v-for="(item,index) in list" :key="index" v-if="item.order_status != 2">
									<view>{{ item.task_id }}</view>
									<view>{{ item.prize_gift_name }}</view>
									<view :style="item.order_status == 1 ? 'color: red;' : ''">
										{{ item.order_status == 1 ? '中奖了' : item.order_status == 2 ? '--' : '未中奖' }}</view>
									<view>x{{ item.order_num }}</view>
									<view>{{ item.order_status == 1 ? item.prize_gold_price : 0 }}
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>

			</u-popup>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<u-popup :show="remark_modal" @close="remark_modal = false" mode="center" bgColor="transparent" :safeAreaInsetBottom="false">

				<view class="list flex_c">
					<view class="title">说明</view>
					<view class="content-text flex_c">
						<view>1.幸运翻倍是我圈的趣味玩法，消费时遵循超圈《圈子管理办法》，获得幸运翻倍的虚拟礼物严禁用于交易和买卖。凡参与者违反《圈子管理办法》和法律法规的冻结交易双方账户和资金，并披露之违反公告。情节严重者依法追究法律责任。</view>
						<view>2.幸运翻倍玩法中有三个虚拟礼物选中一个，活动开始幸运盘转动后将停留在其中一个幸运礼物中，参与者若选对将获得2倍选中的礼物。</view>
						<view>3.每个礼物均为10金币。每次只能选择其中一个，不能多选。</view>
					</view>
				</view>

			</u-popup>
		</view>

		<view class="tab_list1" @click="remark_modal = true">
			<image :src="$util.prefix('wheel/machine-tags-list1.png')" mode="aspectFill"></image>
		</view>

		<view class="tab_list2" @click="openListPopoup">
			<image :src="$util.prefix('wheel/machine-tags-list2.png')" mode="aspectFill"></image>
		</view>

		<view class="loading flex_c" v-if="!loaded">
			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

	</view>
</template>

<script>
	import SlotMachine from '@/components/@lucky-canvas/uni/slot-machine' // 老虎机
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	export default {
		components: {
			SlotMachine,
			ProgressBar,
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},
		data() {
			return {
				blocks: [{
					background: 'red'
				}],

				load_image: [
					// 总背景
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-tags-list2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-tags-list1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-config3.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-config2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-config1.png',
				],

				mySlotMachine: {
					blocks: [{
							padding: "10rpx",
						},
						{
							padding: "10rpx",
						},
					],
					slots: [{
						order: [1, 2, 0],
						direction: 1
					}, ],
					prizes: [],
					defaultStyle: {
						fontSize: "60rpx",
						fontColor: "#FFF",
						fontWeight: 600
					},
					defaultConfig: {
						rowSpacing: "-60rpx",
						colSpacing: "-60rpx",
						mode: 'horizontal'
					},
				},

				config: [1, 10, 50, 100],
				config_num: 0,

				select: {
					gid: 0,
					gold_price: 0,
					id: 0,
					img: '',
					name: '',
				},

				success_modal: false,
				list_modal: false,
				remark_modal: false,

				is_playing: false,

				// 单次下注价格
				sing_gold_price: 0,
				// 本期id
				now_task_id: 0,
				// 本期剩余秒数
				now_left_time: 60,
				// 上一期开奖结果: 1,2,3
				old_prize_res: 0,
				// 上一期我的中奖金币数
				old_prize_gold: 0,
				// 上一期，0=没有下注，1=中奖了，2=没有中奖
				old_prize_status: 0,
				now_prize_status: 0,
				// 本期下注gid
				now_prize_res: 0,
				// 本期下注数量
				now_prize_num: 0,

				rid: 0,

				page: 1,
				total: 1,
				list: [],
				total_prize_num: 0,

				time: 3,
				// 0 倒计时  1 抽奖中  2 等待下轮开始
				banner_status: 0,

				timer: null,

				old_prize_image: '',
				
				loaded: false,
				percent: 0,
				count: 0,

			}
		},
		methods: {
			preventHandler() {
				return;
			},

			startSlotMachine() {
				this.is_playing = true;

				setTimeout(() => {
					this.$refs.mySlotMachine.play();
					this.$post('/active.guessNumPrize/getInitInfo', {
						task_id: this.now_task_id
					}).then(res => {
						this.old_prize_status = res.data.old_prize_status;
						var index = this.mySlotMachine.prizes.findIndex((element) => element.fonts[0].gid == res.data.old_prize_res);
						this.$refs.mySlotMachine.stop(index);
					});
				}, 200);
			},

			endSlotMachine(prize) {
				this.is_playing = false;
				this.select = {
					gid: 0,
					gold_price: 0,
					id: 0,
					img: '',
					name: '',
				};
				this.getInitInfo();
			},

			timeFinish() {
				this.setBannerStatus1();
				this.startSlotMachine();
				this.success_modal = false;
			},

			setBannerStatus1() {
				this.banner_status = 1;
				this.time = 5;
				this.timer = setInterval(() => {
					this.time--;
					if (this.time <= 0) {
						clearInterval(this.timer);
						this.timer = null;
						this.setBannerStatus2();
					}
				}, 1000)
			},

			setBannerStatus2() {
				this.banner_status = 2;
				this.time = 3;
				this.timer = setInterval(() => {
					this.time--;
					if (this.time <= 0) {
						clearInterval(this.timer);
						this.timer = null;
						this.banner_status = 0;
					}
				}, 1000)
			},

			getOldRes(now_task_id) {
				this.$post('/active.guessNumPrize/getInitInfo', {
					task_id: now_task_id
				}).then(res => {
					this.old_prize_res = res.data.old_prize_res;
					this.old_prize_status = res.data.old_prize_status;
					this.old_prize_image = this.getGiftImg();
				});
			},

			getInitInfo(is_refresh = false) {
				this.$post('/active.guessNumPrize/getInitInfo', {
					task_id: this.now_task_id
				}).then(res => {
					if (res.data.now_left_time < 0) {
						return this.$util.msg('活动未开启');
					}
					this.sing_gold_price = res.data.sing_gold_price;
					this.now_task_id = res.data.now_task_id;
					
					this.old_prize_res = res.data.old_prize_res;
					this.old_prize_gold = res.data.old_prize_gold;
					this.old_prize_status = res.data.old_prize_status;
					this.now_prize_status = 0;
					
					if(res.data.now_prize_num > 0){
						this.config_num = res.data.now_prize_num;
						
						var list = res.data.conf_gift_List;
						var index = list.findIndex(item=> item.gid == res.data.now_prize_res)
						this.select = {
							gid: res.data.now_prize_res,
							gold_price: list[index].gold_price,
							id: list[index].id,
							img: list[index].img,
							name: list[index].name,
						}
						
						this.now_prize_status = 1;
					}
					

					if (!is_refresh) {
						// this.now_left_time = res.data.now_left_time;
						this.now_left_time = ((res.data.now_over_time * 1000 - new Date()) / 1000).toFixed(0);
						// 上一期，0=没有下注，1=中奖了，2=没有中奖
						if (this.old_prize_status == 1 || this.old_prize_status == 2) {
							this.success_modal = true;
						}
						this.old_prize_image = this.getGiftImg();
					} else {
						this.$refs.countDown.pause();
						// this.now_left_time = res.data.now_left_time;
						this.now_left_time = ((res.data.now_over_time * 1000 - new Date()) / 1000).toFixed(0);
						this.$refs.countDown.start();
						res.data.conf_gift_List.forEach(item => {
							this.mySlotMachine.prizes.push({
								fonts: [
									{
										// text: `${Number(item.gold_price).toFixed(0)}金币`,
										text: `${item.name}`,
										top: "64%",
										fontSize: "24rpx",
										fontColor: "#894419",
										id: item.id,
										gid: item.gid,
										name: item.name,
										fontWeight: 400
									}, 
								],
								imgs: [{
										src: `https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-config${item.id}.png`,
										width: '224rpx',
										height: '296rpx',
									},
									{
										top: "12%",
										src: item.img,
										width: '136rpx',
										height: '136rpx',
									},
								],
							})
							this.load_image.push(item.img);
						})
						this.old_prize_image = this.getGiftImg();
						this.preLoad();
					}
				});
			},
			
			preLoad() {
				for (let url of this.load_image) {
					let image = new Image();
					image.src = url;
					image.onload = () => {
						this.count++;
						// 加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100);
						this.percent = percentNum;
					}
				}
			},

			onChooseGift(item) {
				if (this.now_prize_status == 1) {
					return this.$util.msg('您已经下注过了');
				}
				this.select.id = item.fonts[0].id;
				this.select.gid = item.fonts[0].gid;
				this.select.img = item.imgs[1].src;
				this.select.name = item.fonts[0].name;
			},

			onChooseGift(item) {
				if (this.now_prize_status == 1) {
					return this.$util.msg('您已经下注过了');
				}
				this.select.id = item.fonts[0].id;
				this.select.gid = item.fonts[0].gid;
				this.select.img = item.imgs[1].src;
				this.select.name = item.fonts[0].name;
			},

			onChooseConfig(item) {
				if (this.now_prize_status == 1) {
					return this.$util.msg('您已经下注过了');
				}
				this.config_num = item;
			},

			setPrize() {
				if (!this.config_num) {
					return this.$util.msg('请选择数量');
				}

				if (!this.select.id) {
					return this.$util.msg('请选择礼物');
				}

				if (this.now_prize_status == 1) {
					return this.$util.msg('您已经下注过了');
				}

				this.$post('/active.guessNumPrize/setPrize', {
					// 押注次数
					num: this.config_num,
					// 房间id
					rid: this.rid,
					// 押注类型
					type: this.select.id,
					// 本期id
					task_id: this.now_task_id,
				}).then(res => {
					this.now_prize_status = 1;
				});
			},

			getList() {
				this.$get('/active.guessNumPrize/getOpenPrizeLog', {
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.total_prize_num = res.data.total_prize_num;
					this.list.push(...res.data.data);
				})
			},

			onReach() {
				if (this.total > this.list.length) {
					this.page++;
					this.getList();
				}
			},

			getGiftImg() {
				var index = this.mySlotMachine.prizes.findIndex((item => item.fonts[0].gid == this.old_prize_res));
				if (index > -1) {
					return this.mySlotMachine.prizes[index].imgs[1].src;
				} else {
					return '';
				}
			},

			getGiftName() {
				var index = this.mySlotMachine.prizes.findIndex((item => item.fonts[0].gid == this.old_prize_res));
				if (index > -1) {
					return this.mySlotMachine.prizes[index].fonts[0].name;
				} else {
					return '';
				}
			},
			
			openListPopoup(){
				this.list = [];
				this.page = 1;
				this.getList();
				this.list_modal = true;
			},

		},

		onLoad(option) {
			
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}

			this.rid = option.rid || 0;
			this.getInitInfo(true);
		},
		
		onHide() {
			console.log('这是监听onHide');
			// this.$native.backAction();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-bg.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #FD7B04;
		min-height: 100vh;
		padding: 62rpx 0 50rpx;
	}
	
	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		padding-top: 20vh;
		background: #FFF;
	}

	.gradient-text {
		// background-image: linear-gradient(to right, #FC7801, #FC4B03);
		color: #FC7801;
		font-weight: 600;
		// -webkit-background-clip: text;
		// color: transparent;
		font-size: 72rpx;
		line-height: 90rpx;
		text-align: center;
		// font-family: 'gongfu';
	}

	.subtitle {
		padding: 0 18rpx;
		margin: 16rpx auto 30rpx;
		height: 48rpx;
		background: #FFD78C;
		border-radius: 24rpx;

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FF6405;
		}
	}

	.banner {
		width: 700rpx;
		height: 166rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFE388 0%, #FEFAF6 100%);
		margin-bottom: 16rpx;

		.center {
			width: 364rpx;
			height: 166rpx;
			background: linear-gradient(180deg, #FEFAF6, #FFD689, #FFB160, #FFD689, #FEFAF6);
			box-shadow: -4rpx 6rpx 10rpx 0rpx rgba(252, 143, 26, 0.4), 4rpx 6rpx 10rpx 0rpx rgba(252, 143, 26, 0.5), inset 0rpx 0rpx 0rpx 2rpx #FEDFCA;
			justify-content: space-around;

			/deep/ .u-count-down__text span {
				font-weight: 600;
				font-size: 64rpx;
				color: #72330D;
				line-height: 90rpx;
			}

			text {
				font-size: 28rpx;
				color: #894419;
				line-height: 40rpx;
			}
		}

		.item {
			flex: 1;

			.top {
				image {
					width: 72rpx;
					height: 72rpx;
				}

				text {
					font-size: 28rpx;
					color: #894419;
					line-height: 40rpx;
					margin-left: 6rpx;
				}
			}

			.bottom {
				font-size: 24rpx;
				color: #894419;
				line-height: 34rpx;
				margin-top: 8rpx;
			}
		}
	}

	.banner-count {
		width: 700rpx;
		height: 240rpx;
		background: linear-gradient(180deg, #FFE388 0%, #FEFAF6 100%);
		border-radius: 32rpx;
		padding: 20rpx;
		justify-content: space-between;
		margin-bottom: 16rpx;

		.banner-count-title {
			font-size: 28rpx;
			color: #894419;
			line-height: 36rpx;
			font-weight: 600;
		}

		image {
			width: 112rpx;
			height: 112rpx;
		}

		text {
			font-weight: 500;
			font-size: 24rpx;
			color: #894419;
			line-height: 34rpx;

			i {
				color: #FD2A53;
			}
		}
	}

	.banner-pendding {
		width: 700rpx;
		height: 166rpx;
		border-radius: 32rpx;
		background: linear-gradient(180deg, #FFE388 0%, #FEFAF6 100%);
		margin-bottom: 16rpx;

		.center {
			width: 364rpx;
			height: 166rpx;
			background: linear-gradient(180deg, #FEFAF6, #FFD689, #FFB160, #FFD689, #FEFAF6);
			box-shadow: -4rpx 6rpx 10rpx 0rpx rgba(252, 143, 26, 0.4), 4rpx 6rpx 10rpx 0rpx rgba(252, 143, 26, 0.5), inset 0rpx 0rpx 0rpx 2rpx #FEDFCA;
			justify-content: space-around;

			span {
				font-weight: 600;
				font-size: 48rpx;
				color: #72330D;
				line-height: 90rpx;
			}

			text {
				font-size: 28rpx;
				color: #894419;
				line-height: 40rpx;
			}
		}

		.item {
			flex: 1;

			.top {
				image {
					width: 72rpx;
					height: 72rpx;
				}

				text {
					font-size: 28rpx;
					color: #894419;
					line-height: 40rpx;
					margin-left: 6rpx;
				}
			}

			.bottom {
				font-size: 24rpx;
				color: #894419;
				line-height: 34rpx;
				margin-top: 8rpx;
			}
		}
	}

	.machine-banner {
		padding: 10rpx;
		height: 346rpx;
		align-items: flex-start;

		#select {
			transform: scale(1.1);
			border: 4rpx solid red;
			border-radius: 30rpx;
			border: 4rpx solid #FF000C;
		}

		.item {
			transition: 0.3s;
			width: 224rpx;
			height: 288rpx;
			position: relative;
			transform: scale(1);
			transform-origin: center;
			padding: 28rpx 0 66rpx;
			justify-content: space-between;

			.text2 {
				color: #894419;
				font-size: 24rpx;
				position: relative;
				z-index: 2;
				margin-top: 22rpx;
			}

			.text1 {
				color: #FFF;
				font-size: 60rpx;
				position: relative;
				z-index: 2;
			}

			.bg {
				width: 224rpx;
				height: 288rpx;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
			}

			.gift-image {
				width: 136rpx;
				height: 136rpx;
				position: relative;
				z-index: 2;
			}
		}
	}

	.machine {
		width: 100vw;
	}

	.content {
		padding: 24rpx 24rpx 42rpx;
		width: 700rpx;
		background: #FFE0AC;
		box-shadow: 0rpx 10rpx 12rpx 0rpx rgba(253, 89, 10, 0.8);
		border-radius: 32rpx;

		.grid {
			.grid-item {
				width: 152rpx;
				height: 64rpx;
				background: #FFF3E4;
				border-radius: 16rpx;
				margin-bottom: 14rpx;
				border: 4rpx solid #FFF3E4;

				text {
					font-weight: 600;
					font-size: 32rpx;
					color: #894419;
				}
			}

			#select {
				border: 4rpx solid #FF871A;
			}
		}

		.btn {
			margin-top: 40rpx;

			.right {
				width: 266rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #FD405D 0%, #FF000C 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.29) 0%, rgba(252, 0, 39, 0.5) 100%);
				border-radius: 48rpx;

				text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
				}
			}
		}

	}

	.success {
		width: 590rpx;
		background: linear-gradient(180deg, #FFE388 0%, #FFE48D 28%, #FEFAF6 100%);
		border-radius: 40rpx;
		padding: 72rpx 84rpx 64rpx;

		.title {
			background: linear-gradient(0deg, #FC7801 0%, #FC4B03 100%);
			-webkit-background-clip: text;
			color: transparent;
			font-size: 42rpx;
			line-height: 60rpx;
			font-weight: 800;
		}

		.text {
			font-size: 32rpx;
			color: #894419;
			line-height: 44rpx;
			margin: 16rpx 0 40rpx;
			text-align: center;
		}

		button {
			width: 328rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #FD405D 0%, #FF000C 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.29) 0%, rgba(252, 0, 39, 0.5) 100%);
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}

	.list {
		width: 700rpx;
		height: 80vh;
		background: url(https://qiniu-cdn.maeiyun.com//h5static/wheel/machine-bg.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #FD7B04;
		border-radius: 46rpx;
		padding: 48rpx 20rpx 32rpx;

		.title {
			background: linear-gradient(0deg, #FC7801 0%, #FC4B03 100%);
			-webkit-background-clip: text;
			color: transparent;
			font-size: 48rpx;
			line-height: 60rpx;
			font-weight: 800;
		}

		.text {
			font-weight: 600;
			font-size: 32rpx;
			color: #FD2A53;
			line-height: 44rpx;
			margin: 10rpx 0 0;
		}

		.table {
			margin-top: 16rpx;
			overflow: hidden;
			flex: 1;
			width: 100%;
			border-radius: 16rpx;

			.flex_1 {
				width: 100%;
				overflow: hidden;
			}

			.item {
				width: 100%;
				background: #FFFFFF;

				view {
					flex: 1;
					font-size: 24rpx;
					color: #894419;
					text-align: center;
					height: 72rpx;
					line-height: 72rpx;
				}
			}

			.header {
				background: #FFB744;
			}
		}

		scroll-view {
			height: 100%;
		}
		
		.content-text {
			margin-top: 24rpx;
			flex: 1;
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx;
			view {
				font-size: 26rpx;
				color: #894419;
				line-height: 40rpx;
			}
		}
	}

	.tab_list1 {
		position: fixed;
		width: 54rpx;
		height: 106rpx;
		top: 78rpx;
		right: 0;

		image {
			width: 54rpx;
			height: 106rpx;
		}
	}

	.tab_list2 {
		position: fixed;
		width: 54rpx;
		height: 166rpx;
		top: 198rpx;
		right: 0;

		image {
			width: 54rpx;
			height: 166rpx;
		}
	}
</style>